<script setup name="App">
import { storeToRefs } from 'pinia'
import { isRef } from 'vue'
import useCounterStore from './store/counter'
// 拿到创建模块
const counter = useCounterStore()
// 如果这儿解构的时候，解构出来的有数据（state、getters），会丢失响应式
// actions 中的方法正常解构没有问题
const { changeCount, changeCountAsync } = counter
// storeToRefs 可以使解构出来的数据保持响应式
const { count, double } = storeToRefs(counter)
// 注意结构出来是 ref 类型的数据
// console.log(isRef(count))
// JS 中使用的时候要加 .value
console.log(count.value)
</script>
<template>
  <div>count: {{ count }}</div>
  <div>double: {{ double }}</div>
  <button @click="changeCount(3)">increment</button>
  <button @click="changeCountAsync(4)">increment async</button>
</template>
